// import React from 'react';
// import ReactDOM from 'react-dom';

import React from './lib/react';
import ReactDOM from './lib/react-dom';
function FunctionCounter(props) {
  console.log('FunctionCounter render');
  return <p>FunctionCounter:{props.count}</p>
}

// React.memo 实现的是和 React.PureComponent 的功能一样
const MemoFunctionCounter = React.memo(FunctionCounter);


class App extends React.Component {

  state = { number: 0 };
  amountRef = React.createRef();

  handleClick = () => {
    if (!this.amountRef.current.value.trim()) return;
    let nextNumber = this.state.number + parseInt(this.amountRef.current.value);
    this.setState({ number: nextNumber });
  }

  render() {
    return (
      <div>
        <MemoFunctionCounter count={this.state.number} />
        <input ref={this.amountRef} />
        <button onClick={this.handleClick}>+</button>
      </div>
    )
  }
}
ReactDOM.render(
  <App />,
  document.getElementById('root')
);


// 注意如果要使用老的把 jsx 编译成 React.createElement(), 必须在启动项中设置 cross-env DISABLE_NEW_JSX_TRANSFORM=true
// 如： "start": "cross-env DISABLE_NEW_JSX_TRANSFORM=true react-scripts start",